<!--
    -  Copyright (c) 2018-2025, haohanwork.com All rights reserved.
  -->
<template>
  <div id="execution">
    <basic-container class="rq">
      <template>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
          <div class="blank">
            <div class="title">
              <h3 class="tyh">
                <span class="title-text">|</span>
                <span>基本信息</span>
              </h3>
            </div>
          </div>
          <el-form-item label="名称" size="small" required>
            <el-input v-model="ruleForm.supplierName" class="input"></el-input>
          </el-form-item>
          <el-form-item label="联系人" size="small" required>
            <el-input v-model="ruleForm.contact" class="input"></el-input>
          </el-form-item>
          <el-form-item label="电话" size="small" required>
            <el-input v-model="ruleForm.telephone" class="input"></el-input>
          </el-form-item>
          <el-form-item label="详细地址" size="small">
            <el-input v-model="ruleForm.address" class="input"></el-input>
          </el-form-item>
          <el-form-item label="经度" size="small">
            <el-input v-model="ruleForm.longitude" class="input"></el-input>
          </el-form-item>
          <el-form-item label="纬度" size="small">
            <el-input v-model="ruleForm.latitude" class="input"></el-input>
          </el-form-item>
          <el-form-item label="部门" size="small" required>
            <avue-crud-input
              v-model="ruleForm.area"
               class="input"
              type="tree"
              placeholder="请选择所属部门"
              :dic="treeDeptData"
              :props="defaultProps"
            ></avue-crud-input>
          </el-form-item>
          <div class="blank">
            <div class="title">
              <h3 class="tyh">
                <span class="title-text">|</span>
                <span>财务信息</span>
              </h3>
            </div>
          </div>
          <el-form-item label="开户名称" prop="accountName" size="small">
            <el-input v-model="ruleForm.accountName" class="input"></el-input>
          </el-form-item>
          <el-form-item label="开户银行" prop="accountBank" size="small">
            <el-input v-model="ruleForm.accountBank" class="input"></el-input>
          </el-form-item>
          <el-form-item label="银行账号" prop="bankAccount" size="small">
            <el-input v-model="ruleForm.bankAccount" class="input"></el-input>
          </el-form-item>
          <el-form-item label="发票抬头" prop="invoicePayable" size="small">
            <el-input v-model="ruleForm.invoicePayable" class="input"></el-input>
          </el-form-item>
          <el-form-item label="税号" prop="dutyParagraph" size="small">
            <el-input v-model="ruleForm.dutyParagraph" class="input"></el-input>
          </el-form-item>
          <div class="blank">
            <div class="title">
              <h3 class="tyh">
                <span class="title-text">|</span> 账号信息
              </h3>
            </div>
          </div>
          <el-form-item label="登陆账号" prop="username" size="small">
            <el-input v-model="ruleForm.username" class="input"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password" size="small">
            <el-input v-model="ruleForm.password" class="input"></el-input>
          </el-form-item>
          <el-form-item label="采购员" prop="purchaseEmployee" size="small">
            <el-input v-model="ruleForm.purchaseEmployee" class="input"></el-input>
          </el-form-item>

          <el-form-item id="ef">
            <el-button type="primary" @click="submitForm">保存</el-button>
            <el-button @click="resetForm">取消</el-button>
          </el-form-item>
        </el-form>
      </template>
    </basic-container>
  </div>
</template>

<script>
import { putObj } from "../../../../api/supply/supplier";
import { fetchTree } from "@/api/admin/dept";
export default {
  data() {
    return {
      ruleForm: {
        id: "",
        supplierName: "",
        telephone: "",
        contact: "",
        address: "",
        accountName: "",
        accountBank: "",
        bankAccount: "",
        invoicePayable: "",
        dutyParagraph: "",
        username: "",
        password: "",
        purchaseEmployee: "",
        area: "",
        longitude: "",
        latitude: ""
      },
      defaultProps: {
        label: "name",
        value: "id"
      },
      treeDeptData: []
    };
  },
  created() {
    this.ruleForm = this.$route.query;
    let passport = this.$route.query.passportId;
    let user = this.$route.query.userId;
    if (passport != null && passport != "" && passport != undefined) {
      this.openApp = true;
    }
    if (user != null && user != "" && user != undefined) {
      this.background = true;
    }
    this.handleDept();
  },
  methods: {
    handleDept() {
      fetchTree().then(response => {
        this.treeDeptData = response.data.data;
      });
    },
    submitForm() {
      putObj(this.ruleForm).then(res => {
        if (res.data.data == true) {
          this.$message.success("修改成功");
        } else {
          this.$message.error("修改失败");
        }
      });
    },
    resetForm() {
      this.$router.go(-1);
    }
  }
};
</script>

<style lang="scss" scoped>
.input {
  width: 80%;
  margin-left: 10%;
}
.blank {
  border-bottom: 1px solid #f0f0f0;
  height: 30px;
  margin-bottom: 10px;
}
#execution {
  display: flex;
  justify-content: center;
}
.tyh {
    margin-left: 45%;
    text-align:center；
}
.rq{
  width: 45%;
}
 #ef {
   text-align:center;
 }
</style>
